<link rel="stylesheet" href="templates/authority/common/css/zTreeStyle.css" />
<link rel="stylesheet" href="templates/authority/receivedMessage/css/detail.css" />
<div class="pd14 vany_authority">
    <div class="vany_treeTable pd14" id="jurisdiction">
        <!--面包屑-->
        <div class="pb10" id="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/' }">消息管理</el-breadcrumb-item>
                <el-breadcrumb-item :to="{ path: '/' }">已收消息</el-breadcrumb-item>
                <el-breadcrumb-item>消息详情</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div id="msgdetail">
            <el-card class="box-card"style="height: auto;">
                <h3 class="title"><strong>{{msgDetail.msgtitle}}</strong></h3>
                <el-row>
                    <el-col :span="16">
                        <ul class="msg-ul">
                            <li style="margin-left: 0px;">发送时间：<span>{{msgDetail.sendTime}}</span></li>
                            <li>发送部门：<span>{{msgDetail.orgName}}</span></span></li>
                            <li>发送人：<span>{{msgDetail.senderName}}</span></span></li>
                        </ul>
                    </el-col>
                </el-row>
                 <div class="content" v-html="msgDetail.msgContent">
                 </div>
            </el-card>
            <!--已开启确认-->
            <div  v-if="msgDetail.isConfirm=='1'">
                <el-card class="box-card">
                    <el-button type="primary"  v-if="hasConfirm==0" @click="comfirm" size="small">确认收到</el-button>
                    <el-button type="primary"  v-else :disabled="true" size="small">已确认</el-button>
                </el-card>
            </div>
            <!--未开启确认-->
            <div  v-else>
                <el-card class="box-card">
                    <el-button type="primary"  :disabled="true"size="small">无需确认</el-button>
                </el-card>
            </div>
            <!--评论部分，是否开启回复-->
            <div  v-if="msgDetail.isReply=='1'"><!--开启回复 -->
                <el-card class="box-card">
                    <el-row>
                        <el-input
                                type="textarea"
                                :autosize="{ minRows: 2, maxRows: 10}"
                                placeholder="请填写你的评论"
                                v-model="content"
                                style="width: 50%;">
                        </el-input>
                    </el-row>
                    <el-row style="margin-top: 10px;">
                        <el-button type="success "@click="publicReply" size="small">发布评论</el-button>
                    </el-row>
                </el-card>
                <el-card>
                    <div slot="header">
                        <span style="font-size: 16px;"><strong>{{total}}条评论</strong></span>
                    </div>
                    <div class="content">
                        <div  v-for="item in replys" style="margin-top: 20px;">
                            <el-row type="flex" :gutter="10">
                                <el-col :span="12">
                                    <el-col :span="12">
                                        <img src="/templates/img/6.jpg" style="width: 50px;height: 50px; border-radius: 40px;text-align: center;" alt="头像" />
                                    </el-col>
                                    <el-col :span="12" style="text-align: left;padding-left: 65px;position: absolute">
                                        <el-row style="font-size: 16px; color: #0f0f0f">{{item.receiverName}}</el-row>
                                        <el-row>{{item.dept}}</el-row>
                                    </el-col>
                                </el-col>
                                <el-col :span="12"  style="text-align: right;">
                                    {{item.replyTime}}
                                </el-col>
                            </el-row>
                            <el-row style="margin-top: 10px; font-size: 14px;color: #0f0f0f">
                                {{item.replyContent}}
                            </el-row>
                            <hr style="margin-top: 20px;">
                        </div>
                    </div>
                    <el-row class="msg-pagination">
                        <el-col  :span="16" :offset="8">
                            <el-row type="flex" justify="end">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="pageIndex"
                                        :page-sizes="[10, 20, 30, 40]"
                                        :page-size="pageSize"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                </el-pagination>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-card>
            </div>
            <div v-else><!--开启回复-->
            </div>

        </div>
    </div>
</div>

<script type="text/javascript" src="templates/authority/receivedMessage/js/messagedetail.js"></script>